Frontend Background Fetch-ல் தேர்ச்சி பெறுதல்: மீள்திறன் கொண்ட, மீண்டும் தொடரக்கூடிய பதிவிறக்கங்களை உருவாக்குதல்

நாம் மேலும் மேலும் இணைந்திருக்கும் இந்த உலகில், வலைத்தளம் என்பது நிலையான ஆவணங்களுக்கான இடம் மட்டுமல்ல. இது உயர்-வரையறை வீடியோ உள்ளடக்கம் முதல் சிக்கலான வணிக மென்பொருள் மற்றும் அதிவேக விளையாட்டுகள் வரை அனைத்தையும் வழங்கும் செறிவான, ஊடாடும் பயன்பாடுகளுக்கான ஒரு தளமாகும். இந்த பரிணாம வளர்ச்சி, உலகெங்கிலும் உள்ள டெவலப்பர்கள் எதிர்கொள்ள வேண்டிய ஒரு குறிப்பிடத்தக்க சவாலைக் கொண்டுவருகிறது: பெரும்பாலும் நம்பகத்தன்மையற்ற நெட்வொர்க்குகளில் பெரிய கோப்புகளை நம்பகத்தன்மையுடன் மாற்றுவது. அது சியோலில் ஒரு புறநகர் ரயிலில் பயணிக்கும் பயனராக இருந்தாலும் சரி, தென் அமெரிக்காவின் கிராமப்புறப் பகுதியில் உள்ள ஒரு மாணவராக இருந்தாலும் சரி, அல்லது துபாயில் ஒரு நிலையற்ற ஹோட்டல் Wi-Fi இணைப்பில் இருக்கும் ஒரு தொழில்முறை நிபுணராக இருந்தாலும் சரி, ஒரு துண்டிக்கப்பட்ட இணைப்பு என்பது தோல்வியுற்ற பதிவிறக்கம், விரக்தியடைந்த பயனர் மற்றும் ஒரு உடைந்த அனுபவம் என்று பொருள்படும். இங்குதான் Background Fetch API ஒரு விளையாட்டு-மாற்றும் தீர்வாக வெளிப்படுகிறது.

பாரம்பரிய முறைகளான `fetch()` அல்லது `XMLHttpRequest` போன்றவை சக்திவாய்ந்தவை, ஆனால் அவை ஒரு வலைப்பக்கத்தின் வாழ்க்கைச் சுழற்சியுடன் உள்ளார்ந்த முறையில் பிணைக்கப்பட்டுள்ளன. ஒரு பயனர் தாவலை மூடினாலோ அல்லது வேறு பக்கத்திற்குச் சென்றாலோ, பதிவிறக்கம் நிறுத்தப்படும். பக்கத்தின் அமர்வைத் தாண்டி அது உயிர்வாழ்வதற்கான உள்ளமைக்கப்பட்ட பொறிமுறை எதுவும் இல்லை. Background Fetch API இந்த முன்னுதாரணத்தை அடிப்படையில் மாற்றுகிறது. இது ஒரு வலைச் செயலி பெரிய பதிவிறக்க (மற்றும் பதிவேற்ற) பணிகளை உலாவியிடமே ஒப்படைக்க அனுமதிக்கிறது, பின்னர் அது எந்தவொரு ஒற்றை உலாவி தாவலையும் சாராமல் பின்னணியில் பரிமாற்றத்தை நிர்வகிக்கிறது. இதன் பொருள், பயனர் பக்கத்தை மூடினாலும் பதிவிறக்கங்கள் தொடரலாம், மேலும் முக்கியமாக, நெட்வொர்க் இணைப்பு மாறும்போது அவை தானாகவே இடைநிறுத்தப்பட்டு மீண்டும் தொடங்கப்படலாம். இது வலையில் உண்மையான மீள்திறன் கொண்ட, நேட்டிவ் போன்ற பதிவிறக்க அனுபவங்களை உருவாக்குவதற்கான திறவுகோலாகும்.

Background Fetch API என்றால் என்ன? ஒரு உலகளாவிய பார்வை

அதன் மையத்தில், Background Fetch API என்பது பெரிய நெட்வொர்க் கோரிக்கைகளை உலாவியின் இயந்திரத்திடம் ஒப்படைப்பதற்காக வடிவமைக்கப்பட்ட ஒரு நவீன வலைத் தரநிலையாகும். இது டெவலப்பர்களுக்கு பயன்பாட்டின் தெரியும் சாளரத்தின் ஆயுட்காலத்தைத் தாண்டி நீடிக்கும் பதிவிறக்கங்கள் அல்லது பதிவேற்றங்களைத் தொடங்க அதிகாரம் அளிக்கிறது. இது ஒரு சிறிய வசதி மட்டுமல்ல; இது மிகவும் வலிமையான மற்றும் திறன்மிக்க வலைக்கான ஒரு அடிப்படை தொழில்நுட்பமாகும்.

ஒரு உலகளாவிய கண்ணோட்டத்தில் அதன் தாக்கத்தைக் கருத்தில் கொள்ளுங்கள். உலகின் பல பகுதிகளில், அதிவேக, நிலையான இணையம் ஒரு ஆடம்பரம், ஒரு கொடுக்கப்பட்ட விஷயம் அல்ல. மொபைல் டேட்டா விலை உயர்ந்ததாகவும், அளவிடப்பட்டதாகவும் இருக்கலாம். ஒரு பயன்பாடு உண்மையிலேயே உலகளாவியதாக இருக்க, அது இந்த மாறுபட்ட நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ள வேண்டும். Background Fetch என்பது சமத்துவத்தை இயக்கும் ஒரு தொழில்நுட்பமாகும். இது விட்டுவிட்டு வரும் இணைப்பு உள்ள ஒரு பகுதியில் உள்ள பயனரை ஒரு கல்வி வீடியோ அல்லது ஒரு முக்கியமான மென்பொருள் புதுப்பிப்பிற்கான பதிவிறக்கத்தைத் தொடங்கவும், அது அவர்களின் இணைப்பு அனுமதிக்கும்போது பின்னணியில் நிறைவடையும் என்று நம்பவும், மற்றும் தோல்வியுற்ற கோப்புகளை மீண்டும் பதிவிறக்குவதில் விலைமதிப்பற்ற டேட்டாவை வீணாக்காமல் இருக்கவும் அனுமதிக்கிறது.

Background Fetch-ன் முக்கிய நன்மைகள்

• மீள்திறன் மற்றும் மீண்டும் தொடங்குதல்: இதுதான் இதன் முக்கிய அம்சம். உலாவியின் அடிப்படை பதிவிறக்க மேலாளர் நெட்வொர்க் தடங்கல்களை நயமாகக் கையாளுகிறார். ஒரு இணைப்பு துண்டிக்கப்பட்டால், பதிவிறக்கம் இடைநிறுத்தப்படுகிறது. இணைப்பு மீண்டும் கிடைத்தவுடன், அது விட்ட இடத்திலிருந்து தானாகவே மீண்டும் தொடங்குகிறது. இது HTTP `Range` தலைப்புகளைக் கையாள்வதற்கான எந்தவொரு சிக்கலான ஜாவாஸ்கிரிப்ட் தர்க்கமும் இல்லாமல் நடக்கிறது.
• ஆஃப்லைன் நிலைத்தன்மை: பதிவிறக்கம் உலாவி செயல்முறையால் நிர்வகிக்கப்பட்டு ஒரு Service Worker-ஆல் கையாளப்படுவதால், அது ஒரு திறந்த தாவலுடன் பிணைக்கப்படவில்லை. ஒரு பயனர் ஒரு பதிவிறக்கத்தைத் தொடங்கலாம், தனது மடிக்கணினியை மூடலாம், வீட்டிற்குப் பயணிக்கலாம், மீண்டும் திறக்கலாம், மற்றும் பதிவிறக்கம் முடிந்திருப்பதையோ அல்லது முன்னேறியிருப்பதையோ காணலாம்.
• வளத் திறன்: வளப் பயன்பாட்டை மேம்படுத்துவதற்கு உலாவி சிறந்த நிலையில் உள்ளது. இது Wi-Fi இணைப்புகளைப் பயன்படுத்திக்கொள்ள பரிமாற்றங்களைத் திட்டமிடலாம், மொபைல் டேட்டாவைச் சேமிக்கலாம், மற்றும் பேட்டரி ஆயுளை மேம்படுத்த செயல்முறைகளை நிர்வகிக்கலாம், இது எல்லா இடங்களிலும் உள்ள மொபைல் பயனர்களுக்கு ஒரு முக்கியமான கவலையாகும்.
• ஒருங்கிணைந்த பயனர் அனுபவம்: চলমান பதிவிறக்கங்களுக்கு உலாவி ஒரு நேட்டிவ், கணினி-நிலை பயனர் இடைமுகத்தை வழங்க முடியும். பயனர்கள் இந்த வலைப் பதிவிறக்கங்களை நேட்டிவ் பயன்பாடுகளிலிருந்து வரும் பதிவிறக்கங்களை நிர்வகிக்கும் அதே இடத்தில் பார்த்து நிர்வகிக்கிறார்கள், இது ஒரு தடையற்ற மற்றும் பழக்கமான அனுபவத்தை உருவாக்குகிறது. இதில் முன்னேற்றம், நிறைவு மற்றும் தோல்விக்கான அறிவிப்புகளும் அடங்கும்.

முக்கிய கூறுகள்: Service Workers மற்றும் BackgroundFetchManager

Background Fetch-ஐப் புரிந்து கொள்ள, நீங்கள் முதலில் அதன் இரண்டு முதன்மைக் கூறுகளைப் பற்றி அறிந்திருக்க வேண்டும். அவை இணைந்து செயல்படுகின்றன: ஒன்று வலைப்பக்கத்திலிருந்து கோரிக்கையைத் தொடங்குகிறது, மற்றொன்று பின்னணியில் முடிவை நிர்வகிக்கிறது.

புகழப்படாத நாயகன்: The Service Worker

ஒரு Service Worker என்பது ஒரு வகை Web Worker, அடிப்படையில் உங்கள் உலாவி பின்னணியில் இயக்கும் ஒரு ஜாவாஸ்கிரிப்ட் ஸ்கிரிப்ட், இது எந்த வலைப்பக்கத்திலிருந்தும் முற்றிலும் தனியாக இருக்கும். இது ஒரு நிரல்படுத்தக்கூடிய நெட்வொர்க் ப்ராக்ஸியாக செயல்படுகிறது, நெட்வொர்க் கோரிக்கைகளை இடைமறித்து கையாளுகிறது, கேச்-ஐ நிர்வகிக்கிறது, மற்றும் புஷ் அறிவிப்புகளை இயக்குகிறது. இது சுதந்திரமாக இயங்குவதால், உங்கள் வலைத்தளம் ஒரு உலாவி தாவலில் திறக்கப்படாதபோதும் இது பணிகளைச் செய்ய முடியும். Background Fetch-க்கு, Service Worker என்பது பதிவிறக்கத்தின் இறுதி வெற்றி அல்லது தோல்விக்குக் காத்திருக்கும், விளைந்த கோப்புகளைச் செயலாக்கும், மற்றும் UI-ஐப் புதுப்பிக்கும் அல்லது ஆஃப்லைன் பயன்பாட்டிற்காக சொத்துக்களை கேச் செய்யும் ஒரு நிலையான சூழலாகும்.

நடத்துனர்: The BackgroundFetchManager

The `BackgroundFetchManager` என்பது உங்கள் பிரதான வலைப்பக்கத்தின் ஜாவாஸ்கிரிப்ட்டிலிருந்து அணுகக்கூடிய இடைமுகமாகும், இதை நீங்கள் ஒரு பின்னணிப் பதிவிறக்கத்தைத் தொடங்கவும் கட்டமைக்கவும் பயன்படுத்துகிறீர்கள். இதை நீங்கள் Service Worker பதிவுப் பொருள் மூலம் அணுகலாம்: `navigator.serviceWorker.ready.then(swReg => swReg.backgroundFetch)`. அதன் முதன்மை முறை `fetch()` ஆகும், இது ஒரு ID, பதிவிறக்க வேண்டிய கோப்புகளின் பட்டியல் மற்றும் விருப்பங்களின் தொகுப்பை எடுக்கும். இந்த முறை தொடக்கத் துப்பாக்கி போன்றது; நீங்கள் அதை அழைத்தவுடன், உலாவி பொறுப்பேற்கிறது, உங்கள் Service Worker இறுதிக் கோட்டில் காத்திருக்கிறது.

ஒரு நடைமுறை படிப்படியான செயல்படுத்தல் வழிகாட்டி

ஒரு பெரிய வீடியோ கோப்பிற்கான மீண்டும் தொடங்கக்கூடிய பதிவிறக்கத்தைச் செயல்படுத்தும் செயல்முறையை நாம் படிப்படியாகப் பார்க்கலாம். இந்த எடுத்துக்காட்டு உலகளவில் பொருந்தக்கூடியது, அது அமெரிக்காவில் உள்ள ஒரு ஊடகத் தளமாக இருந்தாலும், இந்தியாவில் உள்ள ஒரு மின்-கற்றல் தளமாக இருந்தாலும், அல்லது ஜெர்மனியில் உள்ள ஒரு கார்ப்பரேட் பயிற்சி போர்ட்டலாக இருந்தாலும் சரி.

படி 1: உலாவி ஆதரவைச் சரிபார்த்தல்

வேறு எதையும் செய்வதற்கு முன், பயனரின் உலாவி Background Fetch API-ஐ ஆதரிக்கிறதா என்பதை நீங்கள் உறுதிப்படுத்த வேண்டும். முற்போக்கான மேம்பாடு என அறியப்படும் இந்த நடைமுறை, மிகவும் மேம்பட்ட அம்சங்களைப் பெறாவிட்டாலும், அனைவருக்கும் ஒரு செயல்பாட்டு அனுபவத்தை உறுதி செய்கிறது.

உங்கள் பிரதான பயன்பாட்டு ஸ்கிரிப்ட்டில், `BackgroundFetchManager`-ன் இருப்பை நீங்கள் சரிபார்க்க வேண்டும்:

if ('BackgroundFetchManager' in self) { // API ஆதரிக்கப்படுகிறது, மேம்படுத்தப்பட்ட பதிவிறக்க பொத்தானைக் காட்டலாம் } else { // API ஆதரிக்கப்படவில்லை, மாற்று வழியை வழங்கவும் (எ.கா., ஒரு சாதாரண இணைப்பு) }

படி 2: ஒரு Service Worker-ஐ பதிவு செய்தல்

Background Fetch அடிப்படையில் ஒரு Service Worker-ஐச் சார்ந்துள்ளது. உங்கள் Progressive Web App (PWA)-க்கு உங்களிடம் ஏற்கனவே ஒன்று இல்லையென்றால், நீங்கள் ஒன்றை உருவாக்கி பதிவு செய்ய வேண்டும். உங்கள் திட்டத்தின் ரூட் கோப்பகத்தில் `service-worker.js` என்ற கோப்பை உருவாக்கவும். பின்னர், அதை உங்கள் பிரதான ஜாவாஸ்கிரிப்ட் கோப்பிலிருந்து பதிவு செய்யவும்:

async function registerServiceWorker() { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register('/service-worker.js'); console.log('Service Worker வெற்றிகரமாக பதிவு செய்யப்பட்டது:', registration); } catch (error) { console.error('Service Worker பதிவு தோல்வியடைந்தது:', error); } } } registerServiceWorker();

படி 3: Frontend-லிருந்து ஒரு Background Fetch-ஐத் தொடங்குதல்

இப்போது, ஒரு பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும்போது பதிவிறக்கத்தைத் தொடங்கும் செயல்பாட்டை உருவாக்குவோம். இந்தச் செயல்பாடு செயலில் உள்ள Service Worker பதிவைப் பெற்று, பின்னர் `backgroundFetch.fetch()`-ஐ அழைக்கும்.

const downloadVideoButton = document.getElementById('download-video-btn'); downloadVideoButton.addEventListener('click', async () => { try { // Service Worker பதிவைப் பெறவும் const swReg = await navigator.serviceWorker.ready; // பதிவிறக்க விவரங்களை வரையறுக்கவும் const videoUrl = '/assets/large-course-video.mp4'; const videoFileSize = 250 * 1024 * 1024; // 250 MB // பின்னணிப் பதிவிறக்கத்தைத் தொடங்கவும் const bgFetch = await swReg.backgroundFetch.fetch('course-video-download-01', [videoUrl], { title: 'Module 1: Introduction to Web Development', icons: [{ sizes: '192x192', src: '/images/icons/icon-192.png', type: 'image/png', }], downloadTotal: videoFileSize, } ); console.log('Background Fetch தொடங்கப்பட்டது:', bgFetch); } catch (error) { console.error('Background Fetch-ஐத் தொடங்க முடியவில்லை:', error); } });

`swReg.backgroundFetch.fetch()` அளவுருக்களைப் பிரித்துப் பார்ப்போம்:

• ID (`'course-video-download-01'`): இந்த குறிப்பிட்ட பதிவிறக்கப் பணிக்கான ஒரு தனித்துவமான சரம் அடையாளங்காட்டி. இந்த ID-ஐ நீங்கள் பின்னர் வேலையைக் குறிக்கப் பயன்படுத்துவீர்கள்.
• Requests (`[videoUrl]`): பதிவிறக்க வேண்டிய URL-களின் வரிசை. நீங்கள் ஒரு குழுவாக இணைக்கப்பட்ட ஒரே வேலையில் பல கோப்புகளைப் பதிவிறக்கலாம்.
• Options (`{...}`): பதிவிறக்கத்தைக் கட்டமைப்பதற்கான ஒரு பொருள். `title` மற்றும் `icons` ஆகியவை நேட்டிவ் UI அறிவிப்பை உருவாக்க உலாவியால் பயன்படுத்தப்படுகின்றன. `downloadTotal` என்பது அனைத்து கோப்புகளின் மொத்த எதிர்பார்க்கப்படும் அளவு பைட்டுகளில் ஆகும்; இதை வழங்குவது உலாவிக்கு ஒரு துல்லியமான முன்னேற்றப் பட்டியைக் காண்பிக்க மிகவும் முக்கியமானது.

படி 4: Service Worker-ல் நிகழ்வுகளைக் கையாளுதல்

பதிவிறக்கம் உலாவியிடம் ஒப்படைக்கப்பட்டவுடன், உங்கள் frontend குறியீட்டின் வேலை இப்போதைக்கு முடிந்துவிட்டது. மீதமுள்ள தர்க்கம் `service-worker.js`-ல் உள்ளது, இது வேலை முடிந்தாலோ அல்லது தோல்வியடைந்தாலோ உலாவியால் எழுப்பப்படும்.

நீங்கள் இரண்டு முக்கிய நிகழ்வுகளைக் கவனிக்க வேண்டும்: `backgroundfetchsuccess` மற்றும் `backgroundfetchfail`.

// service-worker.js-ல் self.addEventListener('backgroundfetchsuccess', (event) => { const bgFetch = event.registration; event.waitUntil(async function () { console.log(`'${bgFetch.id}' பின்னணிப் பதிவிறக்கம் வெற்றிகரமாக முடிந்தது.`); // நாம் பதிவிறக்கிய கோப்புகளைச் சேமிக்கும் கேச்-ஐத் திறக்கவும் const cache = await caches.open('downloaded-assets-v1'); // பதிவிறக்கம் செய்யப்பட்ட அனைத்து கோப்புப் பதிவுகளையும் பெறவும் const records = await bgFetch.matchAll(); // ஒவ்வொரு பதிவிற்கும், பதிலை கேச்-ல் சேமிக்கவும் const promises = records.map(async (record) => { const response = record.response.clone(); await cache.put(record.request, response); }); await Promise.all(promises); // விருப்பத்தேர்வு: பதிவிறக்க அறிவிப்பில் UI தலைப்பைப் புதுப்பிக்கவும் await event.updateUI({ title: 'பதிவிறக்கம் முடிந்து தயாராக உள்ளது!' }); }()); }); self.addEventListener('backgroundfetchfail', (event) => { const bgFetch = event.registration; console.error(`'${bgFetch.id}' பின்னணிப் பதிவிறக்கம் தோல்வியடைந்தது.`); // விருப்பத்தேர்வு: தோல்வியைப் பிரதிபலிக்க UI-ஐப் புதுப்பிக்கவும் event.updateUI({ title: 'பதிவிறக்கம் தோல்வியடைந்தது. மீண்டும் முயற்சிக்கவும்.' }); });

வெற்றி கையாளியில், நாம் Cache Storage-ஐத் திறந்து, `bgFetch.matchAll()`-ஐப் பயன்படுத்தி பதிவிறக்கம் செய்யப்பட்ட அனைத்து கோப்புகளையும் பெற்று, பின்னர் ஒவ்வொன்றையும் கேச்-ல் வைக்கிறோம். இது உங்கள் வலைச் செயலி மூலம் வீடியோவை ஆஃப்லைனில் இயக்கக் கிடைக்கச் செய்கிறது.

படி 5: முன்னேற்றத்தைக் கண்காணித்தல் மற்றும் பயனர் தொடர்பு

ஒரு சிறந்த பயனர் அனுபவம் என்பது கருத்தைத் தெரிவிப்பதை உள்ளடக்கியது. உலாவி வழங்கும் பதிவிறக்க அறிவிப்பை பயனர் கிளிக் செய்யும்போது, நாம் அவர்களை நமது பயன்பாட்டில் உள்ள ஒரு தொடர்புடைய பக்கத்திற்கு அழைத்துச் செல்ல வேண்டும். இதை Service Worker-ல் `backgroundfetchclick` நிகழ்வு மூலம் கையாளுகிறோம்.

// service-worker.js-ல் self.addEventListener('backgroundfetchclick', (event) => { const bgFetch = event.registration; if (bgFetch.id === 'course-video-download-01') { event.waitUntil( clients.openWindow('/downloads') ); } });

இந்தக் குறியீடு, இந்த குறிப்பிட்ட பதிவிறக்கப் பணிக்கான அறிவிப்பை பயனர் கிளிக் செய்யும்போது உங்கள் வலைத்தளத்தின் `/downloads` பக்கத்தைத் திறக்க உலாவிக்குச் சொல்கிறது. அந்தப் பக்கத்தில், நீங்கள் பதிவிறக்க முன்னேற்றத்தையோ அல்லது முடிக்கப்பட்ட பதிவிறக்கங்களின் பட்டியலையோ காட்டலாம்.

மீண்டும் தொடங்குதலின் மாயம்: இது உண்மையில் எப்படி வேலை செய்கிறது?

Background Fetch-ன் மிகவும் சக்திவாய்ந்த மற்றும் ஒருவேளை மிகவும் தவறாகப் புரிந்து கொள்ளப்பட்ட அம்சம் அதன் தானியங்கி மீண்டும் தொடங்கும் திறன் ஆகும். அதற்காக நீங்கள் எந்தவொரு சிறப்புக் குறியீட்டையும் எழுதாமல் அது எப்படி வேலை செய்கிறது?

பதில் என்னவென்றால், நீங்கள் பொறுப்பை ஒரு மிகவும் உகந்ததாக்கப்பட்ட, கணினி-நிலை செயல்முறைக்கு ஒப்படைத்துள்ளீர்கள்: உலாவியின் சொந்த பதிவிறக்க மேலாளர். நீங்கள் ஒரு பின்னணிப் பதிவிறக்கத்தைத் தொடங்கும்போது, நீங்கள் நேரடியாக நெட்வொர்க்கில் பைட்டுகளை நிர்வகிக்கவில்லை. உலாவிதான் செய்கிறது.

ஒரு நெட்வொர்க் தடங்கலின் போது நிகழும் நிகழ்வுகளின் வரிசை இதோ:

1. பயனர் ஒரு கோப்பைப் பதிவிறக்குகிறார், மேலும் அவரது சாதனம் அதன் நெட்வொர்க் இணைப்பை இழக்கிறது (எ.கா., அவர்கள் ஒரு சுரங்கப்பாதைக்குள் நுழைகிறார்கள்).
2. உலாவியின் பதிவிறக்க மேலாளர் நெட்வொர்க் தோல்வியைக் கண்டறிந்து, பரிமாற்றத்தை நயமாக இடைநிறுத்துகிறார். இது எத்தனை பைட்டுகள் வெற்றிகரமாகப் பெறப்பட்டன என்பதைக் கண்காணிக்கும்.
3. பயனரின் சாதனம் பின்னர் ஒரு நெட்வொர்க் இணைப்பை மீண்டும் பெறுகிறது.
4. உலாவி தானாகவே பதிவிறக்கத்தை மீண்டும் தொடங்க முயற்சிக்கிறது. இது அதே கோப்பிற்காக சேவையகத்திற்கு ஒரு புதிய HTTP கோரிக்கையை அனுப்புகிறது, ஆனால் இந்த முறை அது ஒரு `Range` தலைப்பை உள்ளடக்கியது, இது சேவையகத்திற்கு திறம்பட சொல்கிறது, "என்னிடம் ஏற்கனவே முதல் 'X' பைட்டுகள் உள்ளன, தயவுசெய்து மீதமுள்ளதை பைட் 'X+1' இலிருந்து எனக்கு அனுப்பவும்."
5. சரியாக உள்ளமைக்கப்பட்ட சேவையகம் ஒரு `206 Partial Content` நிலையுடன் பதிலளித்து, கோப்பின் மீதமுள்ள பகுதியை ஸ்ட்ரீம் செய்யத் தொடங்கும்.
6. உலாவி இந்தப் புதிய தரவை பகுதியளவு பதிவிறக்கம் செய்யப்பட்ட கோப்புடன் இணைக்கிறது.

இந்த முழு செயல்முறையும் உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிற்கு வெளிப்படையானது. உங்கள் Service Worker-க்கு கோப்பு முழுமையாக பதிவிறக்கம் செய்யப்பட்டு வெற்றிகரமாக ஒன்றாக இணைக்கப்பட்ட பிறகு, அல்லது செயல்முறை முனையமாக தோல்வியுற்றால் (எ.கா., கோப்பு இனி சேவையகத்தில் இல்லை) மட்டுமே இறுதியில் அறிவிக்கப்படும். இந்த சுருக்கம் நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது, இது டெவலப்பர்களை சிக்கலான மற்றும் பலவீனமான பதிவிறக்கத்தை மீண்டும் தொடங்கும் தர்க்கத்தை உருவாக்குவதிலிருந்து விடுவிக்கிறது.

மேம்பட்ட கருத்துக்கள் மற்றும் உலகளாவிய பார்வையாளர்களுக்கான சிறந்த நடைமுறைகள்

ஒரு துல்லியமான `downloadTotal`-ஐ வழங்குதல்

`downloadTotal` விருப்பம் ஒரு நல்ல அம்சம் என்பதை விட மேலானது. அது இல்லாமல், உலாவி ஒரு நிச்சயமற்ற முன்னேற்றக் காட்டியைக் மட்டுமே காட்ட முடியும் (எ.கா., சுழலும் ஐகான்). அது இருந்தால், அது ஒரு துல்லியமான முன்னேற்றப் பட்டியைக் காண்பித்து, மீதமுள்ள மதிப்பிடப்பட்ட நேரத்தைக் கணக்கிட முடியும். இது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்துகிறது. இந்த மதிப்பைப் பெற, `Content-Length` தலைப்பைச் சரிபார்க்க நீங்கள் கோப்பின் URL-க்கு முன்கூட்டியே ஒரு `HEAD` கோரிக்கையைச் செய்ய வேண்டியிருக்கலாம், அல்லது உங்கள் API அதன் மெட்டாடேட்டாவின் ஒரு பகுதியாக கோப்பு அளவுகளை வழங்கலாம்.

ஒரே பதிவிறக்கத்தில் பல கோப்புகளை நிர்வகித்தல்

தொடர்புடைய சொத்துக்களைக் குழுவாக்கும்போது இந்த API பிரகாசிக்கிறது. ஒரு பயனர் ஒரு புகைப்படக் கேலரியை, அதன் ஆவணங்களுடன் ஒரு மென்பொருள் தொகுப்பை, அல்லது அதன் அனைத்து டெக்ஸ்சர்கள் மற்றும் ஆடியோ கோப்புகளுடன் ஒரு வீடியோ கேம் லெவலைப் பதிவிறக்குவதை கற்பனை செய்து பாருங்கள். நீங்கள் `backgroundFetch.fetch()`-க்கு URL-களின் வரிசையை அனுப்பலாம். இது உலாவியால் ஒரு ஒற்றை அணு வேலையாகக் கருதப்படுகிறது, முழுத் தொகுப்பிற்கும் ஒரு அறிவிப்பு மற்றும் ஒரு முன்னேற்றப் பட்டி இருக்கும். உங்கள் `backgroundfetchsuccess` கையாளியில், `bgFetch.matchAll()` பதிவுகளின் வரிசையைத் தரும், அதை நீங்கள் தனித்தனியாகச் செயலாக்கலாம்.

பிழை கையாளுதல் மற்றும் தோல்வி காட்சிகள்

ஒரு பதிவிறக்கம் பல காரணங்களுக்காகத் தோல்வியடையலாம்: சேவையகம் 404 பிழையைத் தருகிறது, பயனருக்கு வட்டு இடம் தீர்ந்துவிடுகிறது, அல்லது பயனர் உலாவியின் UI-லிருந்து பதிவிறக்கத்தை கைமுறையாக ரத்து செய்கிறார். உங்கள் `backgroundfetchfail` நிகழ்வு கையாளி உங்கள் பாதுகாப்பு வலையாகும். நீங்கள் எந்தப் பகுதித் தரவையும் சுத்தம் செய்ய, உங்கள் பயன்பாட்டிற்குள் பயனருக்கு அறிவிக்க, மற்றும் ஒருவேளை மீண்டும் முயற்சிக்கும் பொத்தானை வழங்க இதைப் பயன்படுத்தலாம். தோல்வி ஒரு சாத்தியம் என்பதைப் புரிந்துகொள்வது ஒரு வலுவான அமைப்பை உருவாக்குவதற்கான திறவுகோலாகும்.

Cache API உடன் பதிவிறக்கம் செய்யப்பட்ட சொத்துக்களைச் சேமித்தல்

பதிவிறக்கம் செய்யப்பட்ட வலை சொத்துக்களைச் சேமிப்பதற்கான மிகவும் பொதுவான மற்றும் பயனுள்ள இடம் Cache API ஆகும். இது குறிப்பாக `Request` மற்றும் `Response` பொருட்களுக்காக வடிவமைக்கப்பட்ட ஒரு சேமிப்பு பொறிமுறையாகும். உங்கள் பதிவிறக்கம் செய்யப்பட்ட கோப்புகளை கேச்-ல் வைப்பதன் மூலம், பயனர் அவற்றை அணுக முயற்சிக்கும்போது அவற்றை நேரடியாக Service Worker-லிருந்து வழங்கலாம், இது உங்கள் பயன்பாட்டை உண்மையாக ஆஃப்லைன்-திறன் கொண்டதாக மாற்றுகிறது.

பல்வேறு தொழில்களில் பயன்பாட்டு வழக்குகள்

Background Fetch-ன் பயன்பாடுகள் பரந்தவை மற்றும் பல உலகளாவிய தொழில்களில் பரவியுள்ளன:

• ஊடகம் மற்றும் பொழுதுபோக்கு: வலை அடிப்படையிலான ஸ்ட்ரீமிங் சேவைகள் ஒரு ஆஃப்லைன் பயன்முறையை வழங்கலாம், இது எந்த நாட்டிலும் உள்ள பயனர்கள் விமானங்கள் அல்லது பயணங்களுக்கு திரைப்படங்கள் அல்லது இசையைப் பதிவிறக்க அனுமதிக்கிறது, அவர்களின் நேட்டிவ் ஆப் đối tác counterpart போலவே.
• கல்வி மற்றும் மின்-கற்றல்: ஆப்பிரிக்காவில் உள்ள ஒரு பல்கலைக்கழகம் மாணவர்களுக்கு பெரிய வீடியோ விரிவுரைகள் மற்றும் ஊடாடும் பாடப் பொருட்களைப் பதிவிறக்குவதற்கு ஒரு வலை போர்ட்டலை வழங்க முடியும், இது மோசமான வீட்டு இணையம் உள்ளவர்கள் கூட தங்கள் கல்வியை அணுகுவதை உறுதி செய்கிறது.
• நிறுவனம் மற்றும் கள சேவைகள்: ஒரு உலகளாவிய உற்பத்தி நிறுவனம் அதன் களப் பொறியாளர்களுக்கு ஒரு PWA-ஐ வழங்க முடியும், இது அவர்கள் இணைய அணுகல் இல்லாத ஒரு தொலைதூர தளத்திற்குச் செல்வதற்கு முன்பு இயந்திரங்களுக்கான பெரிய 3D திட்டங்களையும் தொழில்நுட்ப கையேடுகளையும் பதிவிறக்க அனுமதிக்கிறது.
• பயணம் மற்றும் சுற்றுலா: ஒரு பயணப் பயன்பாடு பயனர்கள் தங்கள் இலக்குக்கான ஆஃப்லைன் வரைபடங்கள், நகர வழிகாட்டிகள் மற்றும் டிக்கெட் தகவல்களைப் பதிவிறக்க அனுமதிக்க முடியும், இது அவர்களை விலையுயர்ந்த சர்வதேச டேட்டா ரோமிங் கட்டணங்களிலிருந்து காப்பாற்றுகிறது.

உலாவி இணக்கத்தன்மை மற்றும் எதிர்காலக் கண்ணோட்டம்

இந்த எழுத்தின் படி, Background Fetch API முக்கியமாக Google Chrome மற்றும் Microsoft Edge போன்ற Chromium-அடிப்படையிலான உலாவிகளில் ஆதரிக்கப்படுகிறது. சமீபத்திய இணக்கத்தன்மை தகவலுக்கு CanIUse.com அல்லது MDN Web Docs போன்ற ஆதாரங்களைச் சரிபார்ப்பது முக்கியம். இன்னும் உலகளவில் ஏற்றுக்கொள்ளப்படவில்லை என்றாலும், முக்கிய உலாவிகளில் அதன் இருப்பு ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கிறது. வலைத் தளம் தொடர்ந்து உருவாகும்போது, இது போன்ற API-கள் வலை மற்றும் நேட்டிவ் பயன்பாடுகளுக்கு இடையிலான திறன் இடைவெளியைக் குறைக்கின்றன, இது ஒரு புதிய தலைமுறை சக்திவாய்ந்த, மீள்திறன் கொண்ட, மற்றும் உலகளவில் அணுகக்கூடிய PWA-க்களுக்கு வழி வகுக்கிறது.

முடிவுரை: அனைவருக்கும் ஒரு மீள்திறன் கொண்ட வலையை உருவாக்குதல்

The Background Fetch API என்பது கோப்புகளைப் பதிவிறக்குவதற்கான ஒரு கருவி மட்டுமல்ல. இது நாம் உருவாக்க விரும்பும் வலை வகையைப் பற்றிய ஒரு அறிக்கை: மீள்திறன் கொண்ட, பயனர்-மையப்படுத்தப்பட்ட, மற்றும் அவர்களின் சாதனம் அல்லது அவர்களின் நெட்வொர்க் இணைப்பின் தரத்தைப் பொருட்படுத்தாமல் அனைவருக்கும் வேலை செய்யும் ஒன்று. பெரிய பரிமாற்றங்களை உலாவிக்கு மாற்றுவதன் மூலம், நாம் நமது பயனர்களை ஒரு முன்னேற்றப் பட்டியைப் பார்க்கும் கவலையிலிருந்து விடுவிக்கிறோம், அவர்களின் டேட்டா மற்றும் பேட்டரியைச் சேமிக்கிறோம், மேலும் வலுவான மற்றும் நம்பகமான ஒரு அனுபவத்தை வழங்குகிறோம்.

பெரிய கோப்பு பரிமாற்றங்களை உள்ளடக்கிய உங்கள் அடுத்த வலைத் திட்டத்தைத் திட்டமிடும்போது, பாரம்பரிய `fetch`-க்கு அப்பால் பாருங்கள். உங்கள் பயனர்களின் உலகளாவிய சூழலைக் கருத்தில் கொண்டு, ஒரு உண்மையான நவீன, ஆஃப்லைன்-முதல் பயன்பாட்டை உருவாக்க Background Fetch-ன் சக்தியைத் தழுவுங்கள். வலையின் எதிர்காலம் நிலையானது மற்றும் மீள்திறன் கொண்டது, இப்போது, உங்கள் பதிவிறக்கங்களும் அப்படித்தான் இருக்க முடியும்.